<template>
  <el-date-picker
    ref="domDate"
    v-model="value"
    v-bind="$attrs"
    :type="dateType"
    :name="'c' + formItemMeta.columnId"
    :format="format"
    :value-format="valueFormat"
    :clearable="clearable"
  >
  </el-date-picker>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  // import { ElDatePicker } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../map'
  
  export declare type IDatePickerType =
  | 'year'
  | 'month'
  | 'date'
  | 'dates'
  | 'week'
  | 'datetime'
  | 'datetimerange'
  | 'daterange'
  | 'monthrange'
  /**
   * 年月日 时分秒
   */
  export default defineComponent({
    name: 'nf-el-from-item-date-time',
    inheritAttrs: false,
    components: {
      // ElDatePicker
    },
    props: {
      ...itemProps, // 基础属性
      format: {
        type: String,
        default: 'YYYY-MM-DD HH:mm:ss'
      },
      valueFormat: {
        type: String,
        default: 'YYYY-MM-DD HH:mm:ss'
      },
      colName: String, // 变更字段名称
      modelValue: [String, Date, Number, Array]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const { value } = itemController(props, context.emit)

      // 根据类型判断是否为数组，判断是否 使用范围。
      let dateType: IDatePickerType = 'datetime'
      if (props.formItemMeta.controlType == '126' ) {
        dateType = 'datetimerange'
        if (!Array.isArray(value.value)) {
          value.value = []
        }
      } else {
        if (Array.isArray(value.value)) {
          value.value = ''
        }
      }

      return {
        dateType,
        value // 控件值
      }
    }
  })
</script>
